<template>
  <view class="p-[32rpx]">
    <view class="mb-[32rpx]">
      <text class="block text-[32rpx] font-bold mb-[16rpx]">医院部门科室项目组选择器示例</text>
      <text class="block text-[24rpx] text-gray-500 mb-[24rpx]">演示如何使用 HospitalDepartmentProjectSelector 组件</text>
    </view>

    <!-- 选择器组件 -->
    <HospitalDepartmentProjectSelector
      v-model="selectedData"
      placeholder="请选择医院/部门/科室/项目组"
      @confirm="handleConfirm"
    />

    <!-- 显示选择结果 -->
    <view v-if="selectedData.hospital" class="mt-[48rpx] p-[32rpx] bg-blue-50 rounded-[16rpx]">
      <text class="block text-[28rpx] font-bold mb-[24rpx] text-gray-800">选择结果：</text>
      
      <view class="mb-[16rpx]">
        <text class="block text-[24rpx] text-gray-500 mb-[8rpx]">医院：</text>
        <text class="block text-[26rpx] text-gray-800">{{ selectedData.hospital?.title || '-' }}</text>
      </view>

      <view class="mb-[16rpx]">
        <text class="block text-[24rpx] text-gray-500 mb-[8rpx]">部门：</text>
        <text class="block text-[26rpx] text-gray-800">{{ selectedData.department?.title || '-' }}</text>
      </view>

      <view class="mb-[16rpx]">
        <text class="block text-[24rpx] text-gray-500 mb-[8rpx]">科室：</text>
        <text class="block text-[26rpx] text-gray-800">{{ selectedData.dept?.title || '-' }}</text>
      </view>

      <view class="mb-[16rpx]">
        <text class="block text-[24rpx] text-gray-500 mb-[8rpx]">项目组：</text>
        <text class="block text-[26rpx] text-gray-800">{{ selectedData.project?.title || '-' }}</text>
      </view>

      <view class="mt-[24rpx] pt-[24rpx] border-t border-blue-200">
        <text class="block text-[24rpx] text-gray-500 mb-[8rpx]">完整路径：</text>
        <text class="block text-[26rpx] text-blue-600 font-medium">
          {{ formatFullPath() }}
        </text>
      </view>
    </view>

    <!-- 使用说明 -->
    <view class="mt-[48rpx] p-[32rpx] bg-gray-50 rounded-[16rpx]">
      <text class="block text-[28rpx] font-bold mb-[16rpx] text-gray-800">使用说明：</text>
      <view class="space-y-[12rpx]">
        <text class="block text-[24rpx] text-gray-600 leading-[36rpx]">1. 点击选择框打开选择器</text>
        <text class="block text-[24rpx] text-gray-600 leading-[36rpx]">2. 按步骤选择：医院 → 部门 → 科室 → 项目组</text>
        <text class="block text-[24rpx] text-gray-600 leading-[36rpx]">3. 如果没有选项数据，可以手动输入</text>
        <text class="block text-[24rpx] text-gray-600 leading-[36rpx]">4. 完成后点击"确定选择"按钮</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import HospitalDepartmentProjectSelector from './HospitalDepartmentProjectSelector.vue'

// 类型定义
interface Hospital {
  key: string
  title: string
  value: any
  parentId: string
  children: any
  leaf: boolean
}

interface Department {
  key: string
  title: string
  leaf: boolean
  parentId: string
}

interface Dept {
  key: string
  title: string
  leaf: boolean
  parentId: string
}

interface Project {
  key: string
  title: string
  leaf: boolean
  parentId: string
}

interface SelectedData {
  hospital: Hospital | null
  department: Department | null
  dept: Dept | null
  project: Project | null
}

// 选择的数据
const selectedData = ref<SelectedData>({
  hospital: null,
  department: null,
  dept: null,
  project: null
})

// 处理确认事件
const handleConfirm = (data: any) => {
  console.log('选择完成:', data)
  selectedData.value = data
}

// 格式化完整路径
const formatFullPath = () => {
  const parts = []
  if (selectedData.value.hospital) parts.push(selectedData.value.hospital.title)
  if (selectedData.value.department) parts.push(selectedData.value.department.title)
  if (selectedData.value.dept) parts.push(selectedData.value.dept.title)
  if (selectedData.value.project) parts.push(selectedData.value.project.title)
  return parts.join(' > ')
}
</script>

